<template>
<div class="pageHome" @mousewheel="rollImg">
  <div class="page" ref="page" v-if="imageBase64" @scroll="updaterPageInfo">
    <div class="imgContainer" :style="{width:(imageSize.width+50)+'px',height:imageSize.height+'px'}">
      <img draggable="false" :style="{width:imageSize.width+'px',height:imageSize.height+'px'}" :src="imageBase64"/>
    </div>
    <!--小地图-->
    <au-image-map ref="map" :size="imageSize" @on-point="({x,y})=>{$refs.page.scrollTo(x,y)}" :page-size="pageSize" :image="imageBase64"></au-image-map>
    <!--工具栏-->
    <div class="tools">
      <div class="toolHome">
        <div class="btn" @click="showCart">裁剪</div>
        <div class="scale">
          <div class="icon el-icon-minus" @click="setScale(scale-scaleInterval)"></div>
          <div class="icon el-icon-refresh" @click="setScale(100)"></div>
          <div class="icon el-icon-plus" @click="setScale(scale+scaleInterval)"></div>
        </div>
        <div class="info">{{scale}}%</div>
        <div class="info">{{imageFactSize.width}} x {{imageFactSize.height}}</div>
      </div>
    </div>
  </div>
  <div v-else class="center">
    无任何图片
  </div>
</div>
</template>

<script>
import {mapState ,mapGetters} from "vuex"
import {ipcRenderer} from "electron";
import auImageMap from "@/components/comm/auImageMap";

export default {
  name: "auImageHome",
  data(){
    return {
      scale:100,
      scaleInterval:15,
      imageFactSize:{
        width:0,
        height:0
      },
      pageSize:{
        width:0,
        height:0,
        top:0,
        left:0,
      },
      cartSize:{
        width:0,
        height:0,
        top:0,
        left:0,
      },
      closeEvent:[],
    }
  },
  components:{
    auImageMap
  },
  computed:{
    imageSize(){
      let size=this.imageFactSize;
      return {
        width:size.width*this.scale/100,
        height:size.height*this.scale/100,
      }
    },
  },
  props:{
    imageBase64:{
      default:null,
      type:String
    }
  },
  methods:{
    //裁剪
    showCart(){
      //设置宽高
      let width=this.imageSize.width;
      let height=this.imageSize.height;
      if(width>this.pageSize.width){
        width=this.pageSize.width;
      }
      if(height>this.pageSize.height){
        height=this.pageSize.height;
      }

      this.$emit('showCart',{height,width})
    },
    setScale(val){
      if(val<this.scaleInterval){
        val=this.scaleInterval;
      }
      this.scale=val;
      this.updaterPageInfo();
    },
    //获取图片真实大小
    getSize(){
      if(!this.data){
        return {width:0,height:0}
      }
      let img = new Image()
      img.src = this.imageBase64;
      img.onload=()=>{
        this.imageFactSize={
          width:img.width,
          height:img.height,
        };
      }
    },
    updaterPageInfo(){
      this.pageSize.width=this.$refs.page.offsetWidth;
      this.pageSize.height=this.$refs.page.offsetHeight;
      this.pageSize.left=this.$refs.page.scrollLeft;
      this.pageSize.top=this.$refs.page.scrollTop;
      this.pageSize.scrollWidth=this.$refs.page.scrollWidth;
      this.pageSize.scrollHeight=this.$refs.page.scrollHeight;
      if(this.imageFactSize.width!=0 && this.imageFactSize.height!=0){
        this.$refs.map && this.$refs.map.updaterShowSize();
      }
    },
    //滚动放大图片
    rollImg(e){
      if(!this.$key.ctrl){
        return ;
      }
      let zoom=this.scale;
      zoom += e.wheelDelta / 12;
      if (zoom >= 15 && zoom <=320) {
        this.scale = zoom;
      }
      return false;
    },
    //初始化监听
    initMonitor(){
      this.$nextTick(()=>{
        this.updaterPageInfo();
        let timer=setInterval(()=>{
          if(this.imageFactSize.width!=0 && this.imageFactSize.height!=0){
            this.$refs.map.updaterShowSize(this.imageFactSize,this.pageSize);
            clearInterval(timer)
          }
        },100);

        let _this=this;
        this.$refs.page.addEventListener("scroll",(e)=>{

          _this.updaterPageInfo();
        });
        let resize=(e)=>{
          this.updaterPageInfo();
        };
        window.addEventListener('resize',resize);
        //注册关闭
        this.closeEvent.push(function(){
          window.removeEventListener('resize',resize,false)
        })
      })
    }
  },
  created() {
    this.getSize();
    this.initMonitor();
  },
  beforeUnmount(){
    this.closeEvent.forEach((fn)=>fn && fn())
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/auImage";

</style>
